<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <!-- http://dojotoolkit.org/reference-guide/dijit/layout.html#dijit-layout -->
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>

    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            baseUrl : "./",
            modulePaths : {
                "dijit" : "js/dojo-root/dijit",
                "dojo" : "js/dojo-root/dojo",
                "dojox" : "js/dojo-root/dojox"
            }
        };
    </script>    
    <script type="text/javascript" src="./js/dojo-root/dojo/dojo.js"></script>     
    <!-- Just leave the following here as reference
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>     
    -->
        <script type="text/javascript">
            dojo.require("dojox.data.XmlStore");
            dojo.require("dojox.xml.parser");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.AccordionContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.form.Button");
            </script>
        <link rel="stylesheet" type="text/css" href="./js/dojo-root/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            html, body { width: 100%; height: 100%; margin: 0; }
        </style>
    </head>
    
    <body class="claro">
        <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
            <div dojoType="dijit.layout.ContentPane" region="top">
                Top pane
            </div>

            <div dojoType="dijit.layout.TabContainer" region="center" style="width: 400px; height: 100px;"
                    tabPosition="left-h" tabStrip="true">
                <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My second tab">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="My last tab">
                    Lorem ipsum and all around - last...
                </div>
<!--
                <div dojoType="dijit.layout.ContentPane" title="My external content tab" href="extContentPage.html">
-->
                <div id="extContentId" dojoType="dijit.layout.ContentPane" title="My external content tab">
                    <button id="btn1" dojoType="dijit.form.Button">
                        Load another content page
                        <script type="dojo/method" event="onClick" args="evt">
                            //dijit.byId(this.id).set("href", "extContentPage2.html");
                            alert("clicked");
                            dojo.byId("btn1").value = "changed button name on click";
                            dojo.byId("extContentId").innerHTML += "Got it";
                            dijit.byId("extContentId").setHref("extContentPage2.html");
                        </script>
                    </button>
                    Lorem ipsum and all around - external content page ...
                </div>
            </div>

            <div dojoType="dijit.layout.ContentPane" region="trailing">
                Trailing pane
            </div>
            <div dojoType="dijit.layout.ContentPane" region="bottom">
                Bottom pane
            </div>
        </div>
        <!-- Added by me -->
        <script type="text/javascript">
            function initApp() {
                if (document.pub) {
                    document.pub();
                }
                initMenu();
            }
            
            function initMenu() {
//                var store = new dojox.data.XmlStore({url: dojo.moduleUrl("xml", "books.xml").toString(), rootItem: "book"});

            var store = new dojox.data.XmlStore({
                  url: "config/books.xml", 
            	  rootItem: "book",
            	});

              //                var store = new dojox.data.XmlStore({url: "config/menu-config.xml", rootItem: "realm"});

		var gotMenus = function(items, request) {

			for ( var i = 0; i < items.length; i++) {

				var item = items[i];

				
//				var xx = dojox.xml.parser.parse(item);
				
                console.log("item book item: " + item);
                console.log("item book element: " + item.element);
                console.log("item book childNodes: " + item.element.childNodes);
                console.log("item book getAttributeNS: " + item.element.getAttributeNS(null, 'isbn'));
                console.log("item book children: " + item.element.children);
                console.log("item book childNodes[]: " + item.element.childNodes['isbn']);
                console.log("item book attribute: " + item.element.getAttribute('bookId'));
                console.log("item book childNode: " + item.element.getElementsByTagName('isbn')[0].getAttribute('t1'));
				
				console.log("Located realm: " + store.getValue(item, "isbn"));
				console.log("getLabelAttributes: "
						+ store.getLabelAttributes(item));
				console.log("getLabelAttributes: " + store.getLabel(item));
				console.log("getAttributes: " + store.getAttributes(item));
				console.log("getIdentity: " + store.getIdentity(item));
				console.log("getIdentityAttributes: "
						+ store.getIdentityAttributes(item));
				console.log("getFeatures: " + store.getFeatures(item));
				console.log("getValue text(): "
						+ store.getValue(item, "text()"));
				console.log("getValue tagName: "
						+ store.getValue(item, "tagName"));
				console.log("getValue title: " + store.getValue(item, "title"));
				console.log("getValue @bookId: "
						+ store.getValue(item, "@bookId"));
				console.log("getValue childNodes: "
						+ store.getValue(item, "childNodes"));
				console.log("getValue _attributeMap: " + store.getValue(item, "@t1"));
				console.log("getValue isbn @t1: "
						+ store.getValue(store.getValue(item, "isbn"), "@t1"));
				//                        console.log("Located realm: " + store.getValue(item, "topic"));
			}
		}

		var onGetMenuError = function(error, request) {
			alert("get menu error");
		}

		var request = store.fetch({

			query : {
				isbn : "A9B57*",
				title : "Title of*"
			},
			onComplete : gotMenus,
			onError : onGetMenuError
		});

	}

	function setHref(obj, href) {
		obj.setHref(href);
	}
</script>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                initApp();
            });
        </script>
    </body>

</html>